import React from 'react'

import { CategoryWrap } from './StyledCategory'
import Search from '@c/search/Search.jsx'
import Menu from './Menu'

export default function CategoryUi(props) {
  const { type, onCategoryUiClick } = props
  
  return (
    <CategoryWrap>
      <nav>
        <ul>
          <li
            className={type === 'category' ? "active" : ""}
            onClick={onCategoryUiClick('category')}
          >分类</li>
          <li
            className={type === 'material' ? "active" : ""}
            onClick={onCategoryUiClick('material')}>食材</li>
          <li className={type === 'category' ? "slide" : "slide right"}></li>
        </ul>
      </nav>
      <Search
        outerbg="#fff"
        innerbg="#efefef"
        hasborder={false}
      ></Search>
      <Menu type={type} {...props}></Menu>
    </CategoryWrap>
  )
}
